<%--
  Created by IntelliJ IDEA.
  User: zzf
  Date: 2021/1/7
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html lang="zh-CN">

<head>
    <c:set var="path" value="${pageContext.request.contextPath}" scope="page"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <%--    <base href="<%=basePath%>">--%>
    <title>长护险平台大屏展示</title>
    <meta name="description" content="大屏显示">
    <meta http-equiv="refresh" content="600">
    <link type="text/css" rel="stylesheet" href="${path}/css/largescreen/largescreen.css">
    <link type="text/css" rel="stylesheet"  href="${path}/css/bootstrap/css/bootstrap.css">
    <%--    <link type="text/css" rel="stylesheet"  href="${path}/css/bootstrap/css/bootstrap-table.min.css">--%>
    <%--    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=BgovRicqgD1sgrG1qDwGBfGobtu6SrvW&s=1"></script>--%>
    <script src="http://api.map.baidu.com/api?v=3.0&ak=BgovRicqgD1sgrG1qDwGBfGobtu6SrvW" type="text/javascript"></script>

</head>

<body onload="bdGEO()">
<%--导航栏信息--%>
<section>
    <div class="container-fluid">
        <nav class="navbar navbar-transparent border-bottom" >
            <div class="navbar_title flex-column justify-content-center text-center text-success">
                <h2>
                    嘉定区长护险居家照护监管系统
                </h2>

            </div>
            <showTime>
                <div class="showTime" >时间显示</div>
            </showTime>
        </nav>
    </div>
</section>

<%--主体布局 样式里的left,mid,right,top,bottom分别代表左，中，右，上，下--%>
<main class="container-fluid" >
    <div class="row row_1">
        <div class="col-3 left">
            <div class="left_top col">
                <div class="col row_3">
                    <div class="col" style="height: 6%">
                        <h5>居家照护服务机构街镇服务情况</h5>
                    </div>
                    <div class="col" id="basic_statistics" style="height: 93% ">
                    </div>
                </div>
                <div class="left_top-footer"></div>
            </div>
            <div class="left_mid col">
                <div class="col row_3">
                    <div class="col" style="height: 6%">
                        <h5>服务区域人数月数据统计</h5>
                    </div>
                    <div class="col" id="month_statistics" style="height: 93% ">
                    </div>
                </div>
                <div class="left_mid-footer"></div>
                <div class="chart"></div>
            </div>
            <div class="left_bottom col">
                <div class="col row_3">
                    <div class="col" style="height: 6%">
                        <h5>本月人数与上月人数对比统计</h5>
                    </div>
                    <div class="col" id="month_year_comparison" style="height: 93% ">
                    </div>
                </div>
                <div class="left_bottom-footer"></div>
            </div>
        </div>
        <div class="col-6 mid row">
            <div class="col row_2">
                    <div class="no">
                        <div class="no-hd">
                            <ul>
                                <li  id="eldercount"></li>
                                <li  id="staffcount"></li>
                                <li  id="jdfwcount"></li>
                            </ul>
                        </div>
                        <div class="no-bd">
                            <ul>
                                <li>服务老人数</li>
                                <li>在职护工数</li>
                                <li>服务机构数</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col row_3">
                    <div class="col" style="height: 4%">
                        <h4>嘉定区地图显示</h4>
                    </div>
                    <div class="col" id="map" style="height: 95% ">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-3 right">
            <div class="right_top col">
                <div class="col row_3">
                    <div class="col" style="height: 6%">
                        <h5>居家照护服务机构区域详情</h5>
                    </div>
                    <div class="col" id="detail_statistics" style="height: 93% ">
                    </div>
                </div>
                <div class="right_top-footer"></div>
            </div>
            <div class="right_mid col">
                <div class="right_mid-footer"></div>
                <div class="right_midIn">
                    <h3>签到签退数据滚动显示</h3>
                    <div class="biaoge_list" style="width:100%; height:23vh">
                        <div class="biaoge_listIn">
                            <ul class="ul_title">
                                <li1>姓名</li1>
                                <li2>签到/签退情况</li2>
                                <li2>签到时间</li2>
                            </ul>
                            <div class="ul_list">
                                <div id="qdqt" class="ul_listIn">


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_bottom col">
                <div class="right_bottom-footer"></div>
                <div class="right_midIn">
                    <h3>异常数据滚动显示</h3>
                    <div class="biaoge_list" style="width:100%; height:23vh">
                        <div class="biaoge_listIn">
                            <ul class="ul_title">
                                <li4>联系人</li4>
                                <li3> 联系电话</li3>
                                <li5>   时间</li5>
                            </ul>
                            <div class="ul_list">
                                <div id="qdqtyc" class="ul_listIn">


                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>


<script src="${path}/lib/js/jquery-3.3.1.js"></script>
<script src="${path}/lib/js/popper.min.js"></script>
<script src="${path}/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${webPath}/js/echats.js"></script>

<%--<script src="${path}/js/largescreen/map.js"></script>--%>
<script src="${path}/js/largescreen/echarts.min.js"></script>
<script src="${path}/js/largescreen/index.js"></script>
<script src="${path}/js/largescreen/detail_statistics.js"></script>
<script src="${path}/js/largescreen/month_statistics.js"></script>
<script src="${path}/js/largescreen/month_year_comparison.js"></script>

<script>
    var URLS = {
        findAll:"${path}/elder/FindAllElder",
    };
</script>

<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script src="${path}/js/largescreen/map.js"></script>

<script>
    <%--    读取年份--%>
    $(function(){
        var html = "";
        var now = new Date();
        var year = now.getFullYear();
        html += '<span>'+year+'年前半年统计</span>';
        $("#systime").append(html);

        $.ajax({
            url: "../statistics/jdfwcount",
            type: "post",
            dataType: "json",
            success: function (data) {
                document.getElementById("jdfwcount").innerText=data
            }
        })
        $.ajax({
            url: "../statistics/staffcount",
            type: "post",
            dataType: "json",
            success: function (data) {
                document.getElementById("staffcount").innerText=data

            }
        })
        $.ajax({
            url: "../statistics/eldercount",
            type: "post",
            dataType: "json",
            success: function (data) {
                document.getElementById("eldercount").innerText=data

            }
        })
    })
</script>

<script>
    var t = null;
    t = setTimeout(time, 1000);
    function time() {
        clearTimeout(t);
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m= dt.getMinutes();
        var s =dt.getSeconds();
        document.querySelector(".showTime").innerHTML=
            "当前时间：" + y +"年"+ mt +"月"+ day +"日" + h +"时"+ m +"分"+ s +"秒";
        t = setTimeout(time,1000);
    }
</script>
<%--<script src="${path}/js/largescreen/flexible.js"></script>--%>

<script>
    //右中 签到签退
    $.ajax({
        url:'../statistics/sign',
        type:"post",
        dataType:"json",
        data:{
            state:0
        },
        success:function(data){
            console.log("右中",data);
            for (var i in data){
                document.getElementById('qdqt').innerHTML+=' <ul class="ul_con">\n' +
                    '                                        <li1>'+data[i].name+'</li1>\n' +
                    '                                        <li2>'+data[i].signResult+'</li2>\n' +
                    '                                        <li6>'+data[i].fSign+'</li6>\n' +
                    '                                    </ul>'
            }
        }
    })    // 右下 签到签退异常
    $.ajax({
        url:'../statistics/sign',
        type:"post",
        dataType:"json",
        data:{state:-1},
        success:function(data){
            console.log("右下",data);
            for (var i in data){
                document.getElementById('qdqtyc').innerHTML+=' <ul class="ul_con">\n' +
                    '                                        <li4>'+data[i].name+'</li4>\n' +
                    '                                        <li3>'+data[i].phone_number+'</li3>\n' +
                    '                                        <li5>'+data[i].fSign+'</li5>\n' +
                    '                                    </ul>'
            }
        }
    })
</script>
</body>
</html>
